<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.child{
			width: 200px;
			height: 200px;
			background-color: green;
		}
		.hidden{
			display: none;
		}
	</style>
</head>
<body>
	<button id="btn">
		隐藏

	</button>

	<input type="text" id="user" value = 'wusir'>
	<div class="box">
		
		<div class="child" id="child"></div>

	</div>

	<!-- 1.样式属性 display:none|block

		 2.通过控制标签属性className 对类型添加 移除

		 3.DOM创建 销毁 创建销毁

	 -->
	 <script>
	 	
		var oChild = document.getElementById('child');
		//这个事件操作是异步（不会阻塞 不等待）的 
		document.getElementById('btn').onclick  = function() {
			// oChild.style.display = 'none';

			// oChild.className +=' hidden';
			oChild.className = oChild.className + ' hidden';
			console.log(oChild.className);
			console.log(this.innerText);
			console.log(this.innerHTML);
			// this.innerHTML += '<span>了么</span>';
			this.innerText += '<span>了么</span>';

		}

		console.log(document.getElementById('user').value);
		document.getElementById('user').value = 'alex';

	 </script>
	
</body>
</html>